<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html> 
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]--> 
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]--> 
<!--[if !IE]><!--> 
<html lang="en"> <!--<![endif]--> 
<!-- BEGIN HEAD --> 
<head>
	<title>Bone</title>
	<link href="${ctx}/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
	<meta content="width=device-width, initial-scale=1.0" name="viewport" /> 
<%-- 	<link href="${ctx }/resource/price/css/family.css" rel="stylesheet" type="text/css"> --%>
	<link rel="stylesheet" href="${ctx }/resource/price/css/screen.css">
	<link rel="shortcut icon" href="${ctx}/resource/image/logo2.png">
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
	<input id="rootPath" type="hidden" value="${ctx }">
	<!-- BEGIN HEADER -->
	 <input id="lotteryId" type="hidden" value="${lotteryEvent.id}">
	<!-- END HEADER -->
	
		<!-- BEGIN CONTAINER -->
		<div id="wrapper">
		
		<!-- Awards panel -->
		<aside class="zone-container active">
			<div class="trigger active">
				<i class="icon icon-filter"></i>
			</div>
			<div class="board" style="z-index:1">
			<label class="btn btn-success " id="showOr" style="border-radius:0;z-index:9;margin-left:11px;margin-top:5px">抽奖操作手册</label>
			<p class="btn btn-info" id="ptip" style="width:250px;border-radius:0;padding-bottom:20px;z-index:9;margin-left:11px;display: none"><label style=" font-size:24px;margin-top:10px">抽奖操作手册</label><br>
				<label>键盘1: 一等奖</label> 
				<label>键盘2: 二等奖</label> 
				<label>键盘3: 三等奖 </label> 
				<label>键盘4: 感恩奖</label> 
				<label>键盘0: 显示全部   </label> 
				<label>CTRL + DEL 清除数据</label> </p>
			<c:set var="maxItemSize" value="${fn:length(lotteryItem)}"></c:set>
			<c:forEach items="${lotteryItem}" var="lotteryItem"  varStatus="status">
				
					 <c:if test='${lotteryItem.orderNum == maxItemSize }'>
					 	<div class="item_${lotteryItem.orderNum} active" data-iid="${lotteryItem.id}">
					 </c:if>
					 <c:if test='${lotteryItem.orderNum != maxItemSize }'>
					 	<div class="item_${lotteryItem.orderNum}" data-iid="${lotteryItem.id}">
					 </c:if>
				
						<h1>${lotteryItem.title }</h1>
						
						<fieldset>
							<legend></legend>
						</fieldset>
	
						<div class="list">
							<p id="pfirst">${lotteryItem.lotteryName }</p>
							<ul class="win">
								<li>
									<div class="avatar"><img src="${ctx }/resource/avatar/start_page.jpg" width="34"></div>
									<div class="num"></div>
									<div class="name firstName">***********</div>
									<button class="icon icon-delete" title="删除" style="display: none;">删除</button>
								</li>
							</ul>
							<code>0/${lotteryItem.amount }</code>
						</div>
						<div style="margin-top:20px">
						</div>
					</div>
				</c:forEach>      
				<input type="button" class="btn btn-success"  style="cursor:pointer ;border-radius:0px;margin-left:20px " id="saveBtn" value="保存">
			</div>
		</aside>
	
		<section id="container" class="clearfix">
			<div class="html5_video">
				<video autoplay="autoplay" loop="loop" src="${ctx }/resource/price/video/cloud.mp4"></video>
			</div>

			<div style="display: none;" class="active" id="copyleft">
				<div class="favicon">Y</div>
				<div class="copyright">samsung.com</div>
			</div>

			<section id="content" class="clearfix active">
				<div style="margin-left: 50px;" class="flicker">
					<img src="${ctx }/resource/avatar/start.png" width="250"> 
				</div>
				<div style="margin-left: -293px;" class="counter-container clearfix">
					<div class="counter">
						<ul class="prefix"><li>*</li><li>*</li><li>*</li></ul>
					</div>

					<div class="counter">
						<ul class="none"><li>*</li><li>*</li><li>*</li><li>*</li></ul>
					</div>

					<div class="counter">
						<ul class="suffix"><li>*</li><li>*</li><li>*</li><li>*</li></ul>
					</div>
				</div>
			</section>
		</section>
	</div>
	<!-- END  CONTENT-->
	
	<!-- BEGIN FOOTER1 -->
 
	<!-- END FOOTER -->
	<!-- BEGIN JAVASCRIPTS -->
	<%@ include file="/common/js.jsp"%>
	<script type="text/javascript" src="${ctx }/resource/price/js/price.js"></script>
	<script type="text/javascript">
 
		dataSource = ${dataSource};
		defaultItem = "item_${maxItemSize}";
		allClass = "${allClass}";
		config.awards = defaultItem;
		config.keycode = ${keyCode};
		config.total = dataSource.length;
		$("#showOr").click(function(){
			$("#ptip").toggle();
		});
	</script>
	<!-- END JAVASCRIPTS -->
 
	
</body>
<!-- END BODY -->
</html>